<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" title="starrockts配置" @close="resetForm" width="60%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="name" label="外部资源名">
            <el-input v-model="formData.name" placeholder="请输入外部资源名" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="propertiesType" label="资源类型">
            <el-input v-model="formData.propertiesType" placeholder="请输入资源类型" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="driverUrl" label="资源驱动地址">
            <el-input v-model="formData.driverUrl" placeholder="请输入资源驱动地址" />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="code">
          <codemirror
            v-model="code"
            placeholder="Coding..."
            :style="{ height: '300px' }"
            :autofocus="true"
            :tabSize="2"
            :extensions="extensions"
            v-loading="loading"
          />
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitBtnLoading" @click="handleCreate">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { watch } from 'vue-demi'
import { createsStarrocktsProperties, findStarrocktsProperties } from '@/api/datasourceCenter'
import { Codemirror } from 'vue-codemirror'
import { xml } from '@codemirror/lang-xml'
import { sql } from '@codemirror/lang-sql'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorView } from '@codemirror/view'
import {sm4Decrypt} from "../../../utils/sm4.js";
const code = ref('')
const extensions = [sql(), oneDark]

const props = defineProps({
  datasource: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const submitBtnLoading = ref(false)
const formData = reactive({
  name: '',
  propertiesType: '',
  driverUrl: ''
})
const formRules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请输入外部资源名！' }],
  propertiesType: [{ required: true, trigger: 'blur', message: '请输入资源类型！' }],
  driverUrl: [{ required: true, trigger: 'blur', message: '请输入资源驱动地址！' }]
})
const resetForm = () => {
  formRef.value?.resetFields()
  emit('update:visible')
}
const handleCreate = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      const params = {
        databaseId: props.datasource._id,
        type: props.datasource.type,
        ...formData
      }
      console.log(params)
      submitBtnLoading.value = true
      createsStarrocktsProperties(params)
        .then((res) => {
          code.value = sm4Decrypt(res.data)
        })
        .finally(() => {
          submitBtnLoading.value = false
        })
    }
  })
}
watch(
  () => props.visible,
  (val) => {
    if (val) {
      console.log(props.datasource)
      findStarrocktsProperties(props.datasource._id).then((res) => {
        if (res.data) {
          Object.assign(formData, res.data)
          handleCreate()
        }
      })
    } else {
      code.value = ''
    }
  }
)
</script>

<style lang="scss" scoped></style>
